<script setup lang="ts">
  import { useGetCustomFieldList } from '@/services/pages/return-factory'
  import CustomFieldModal from './CustomFieldModal.vue'
  import { ref } from 'vue'
  import { useFieldsDel } from '@/services/pages/return-factory'
  import { ElMessageBox, TableInstance } from 'element-plus'
  import infoTip from '@/config/info-tip'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const { total, list, getListLoading, getListParam, getList } = useGetCustomFieldList()
  const { del } = useFieldsDel()

  defineOptions({
    name: 'TableReturnFactoryCustomField',
  })

  const emits = defineEmits<{
    (e: 'select-field', value: Array<string>): void
  }>()

  const getFieldType = (type: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10) => {
    if (type === 1) {
      return '文本'
    }

    if (type === 2) {
      return '多行文本'
    }

    if (type === 3) {
      return '单选'
    }

    if (type === 4) {
      return '多选'
    }

    if (type === 5) {
      return '多图'
    }

    if (type === 6) {
      return '附件'
    }

    if (type === 7) {
      return '视频'
    }

    if (type === 8) {
      return '评分'
    }

    if (type === 9) {
      return '日期'
    }

    if (type === 10) {
      return '日期时间'
    }
  }
  const customFileDialogVisible = ref(false)
  const currentEditFieldId = ref('')
  const tableInstance = ref<TableInstance | null>(null)
  const selectedFieldIds = ref<Array<string>>([])

  const handleUpdateField = (id: string) => {
    currentEditFieldId.value = id
    customFileDialogVisible.value = true
  }

  const handleDel = (field: ReturnFactoryCustomField) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(field, true)
      ElMessageBox({
        title: '提示',
        type: 'error',
        message: infoTip.returnFactory.customField.delOne,
        showCancelButton: true,
        async beforeClose(action, instance, done) {
          if (['close', 'cancel'].includes(action)) {
            done()
            return
          }

          if (action === 'confirm') {
            instance.cancelButtonLoading = true
            instance.confirmButtonLoading = true
            const res = await del(selectedFieldIds.value)
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res.code === 20000) {
              HMessage.success(infoTip.returnFactory.customField.multipleDelSuccess)
              getList()
              done()
              return
            }
            HMessageBox.error(res.message)
          }
        },
      })
    }
  }

  const handleSelectField = (fields: Array<ReturnFactoryCustomField>) => {
    selectedFieldIds.value = fields.map((field) => field.id)
    emits('select-field', selectedFieldIds.value)
  }

  defineExpose({
    getList: async (param: { name: string; limit: number; page: number }) => {
      getListParam.value = {
        name: param.name || '',
        limit: param.limit || 50,
        page: param.page || 1,
      }
      await getList()
    },
    total,
  })
</script>

<template>
  <el-table
    ref="tableInstance"
    :border="true"
    stripe
    height="100%"
    v-loading="getListLoading"
    :data="list"
    @selection-change="handleSelectField"
  >
    <!-- 多选 -->
    <el-table-column type="selection" fixed="left" width="50" :align="'center'"></el-table-column>

    <!-- 序号 -->
    <el-table-column
      type="index"
      fixed="left"
      width="50"
      :align="'center'"
      label="序号"
    ></el-table-column>

    <!-- 字段名称 -->
    <el-table-column
      label="字段名称"
      prop="name"
      show-overflow-tooltip
      width="100"
    ></el-table-column>

    <!-- 字段类型 -->
    <el-table-column label="字段类型" width="80">
      <template #default="{ row }">{{ getFieldType(row.type) }}</template>
    </el-table-column>

    <!-- 字段内容 -->
    <el-table-column label="字段内容" min-width="200" show-overflow-tooltip>
      <template #default="{ row }">
        {{ row.content.join('、') }}
      </template>
    </el-table-column>

    <!-- 移动端显示 -->
    <el-table-column label="移动端显示" width="100">
      <template #default="{ row }">
        {{ row.mobileShow ? '显示' : '隐藏' }}
      </template>
    </el-table-column>

    <!-- 是否必填 -->
    <el-table-column label="是否必填" width="80">
      <template #default="{ row }">
        {{ row.required ? '是' : '否' }}
      </template>
    </el-table-column>

    <!--关联返厂模块-->
    <el-table-column label="关联返厂模块" width="150" show-overflow-tooltip>
      <template #default="{ row }">
        {{ row.repairModule.join('、') }}
      </template>
    </el-table-column>

    <!-- 提示信息 -->
    <el-table-column
      label="提示信息"
      prop="tip"
      width="100"
      show-overflow-tooltip
    ></el-table-column>

    <!-- 最大尺寸 -->
    <el-table-column label="最大尺寸" width="80" prop="uploadSize"></el-table-column>

    <!-- 上传数量 -->
    <el-table-column label="上传数量" width="80" prop="uploadQty"></el-table-column>

    <!-- 创建时间 -->
    <el-table-column label="创建时间" prop="createTime" width="140"></el-table-column>

    <!-- 更新时间 -->
    <el-table-column label="更新时间" prop="updateTime" width="140"></el-table-column>

    <!-- 状态 -->
    <el-table-column label="状态" width="70" fixed="right" :align="'center'">
      <template #default="{ row }">
        <div class="flex_justify_center">
          <h-status v-if="!row.status">启用</h-status>
          <h-status v-else type="info">禁用</h-status>
        </div>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column label="操作" width="100" fixed="right">
      <template #default="{ row }">
        <h-space>
          <h-link @click="handleUpdateField(row.id)">编辑</h-link>
          <h-link type="error" @click="handleDel(row)">删除</h-link>
        </h-space>
      </template>
    </el-table-column>

    <custom-field-modal
      v-model:visible="customFileDialogVisible"
      :field-id="currentEditFieldId"
      @update="getList"
    ></custom-field-modal>
  </el-table>
</template>

<style scoped lang="scss"></style>
